<template>
  <div class="Statistical borderStyle">
    <div class="blueTitleStyle">告警数量统计</div>
    <div
      class="Statistical-con"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <v-chart :options="newOption" :auto-resize="true" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import time from "@/utils/time";

interface newEChartOption extends EChartOption {
  series?: any[];
}

@Component
export default class Statistical extends Vue {
  @Prop()
  countNum;
  loading: boolean = false;
  public option: newEChartOption = {
    color: ["#2CACFB"],
    grid: {
      left: 20,
      top: 20,
      bottom: 40,
      right: 20,
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        formatter: v=>{          
          return v.slice(0,10);
        },
        color: "#fff",
      },
      axisLine: {
        
        lineStyle: {
          color: "#466BC2",
        },
      },
      data: ["12-17", "12-18", "12-19", "12-20", "12-21", "12-22", "12-23"],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      axisLine: {
        lineStyle: {
          color: "#466BC2",
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    dataZoom: [
      {
        type: "slider",
        show: true,
        start: 0,
        handleStyle: {
          color: "#fff",
        },
        showDetail: false,
        textStyle: {
          color: "#fff",
        },
      },
    ],

    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(34, 107, 229, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(34, 107, 229, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  get newOption() {
    let option = this.option;
    let xAxisData = [];
    let yAxisData = [];
    let echartData = this.echartData;
    // console.log(echartData);
    echartData.forEach((item) => {
      xAxisData.push(item.myTime);
      yAxisData.push(item.val);
    });
    (option as any).xAxis.data = xAxisData;
    option.series[0].data = yAxisData;
    return option;
  }
  mounted() {
    // this.getCountNum();
  }
  // 图表数据
  echartData = [];
  // 获取数据
  @Watch("countNum")
  getCountNum() {
    // this.loading = true;
    // (this as any).$services
    //   .getCountNum()
    //   .then((result: any) => {
    this.loading = false;
    // console.log(result);
    // let data = result.data;
    let data = this.countNum;
    data.forEach((v) => {
      v.myTime = time(v.time);
    });
    this.echartData = data;
    // })
    // .catch((err: object) => {
    //   this.loading = false;
    //   console.log(err);
    // });
  }
}
</script>

<style lang="scss" scoped>
.Statistical {
  width: 100%;
  height: 100%;
  .Statistical-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    > div {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

